<style>
    .layui-input, .layui-textarea {
        display: block;
        width: 85%;
        padding-left: 10px;
    }

    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 113px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-form-select dl {
        left: 33px;
        min-width: 85%;
    }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="productReviewForm" class="layui-form model-form">
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">产品来源：</label>
            <div class="layui-input-block">
                <select id="productSource" name="productSource" lay-filter="productSource"
                        class="common-select-search">
                    <option value="">请选择</option>
                    <option value="1">客户订单</option>
                    <option value="2">自研产品</option>
                </select>
            </div>
        </div>
    </div>
    <div id="customerProductInfo">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>客户信息产品信息</legend>
        </fieldset>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label required">来源：</label>
                <div class="layui-input-block">
                    <input name="source" type="text" class="layui-input"
                           required autocomplete="off" value="客户订单"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label required">客户名称：</label>
                <div class="layui-input-block">
                    <select id="customerId" lay-search="" name="customerId" lay-filter="customerId"
                            class="common-select-search">
                    </select>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label required">客户订单：</label>
                <div class="layui-input-block">
                    <input name="cusProductOrder" placeholder="请输入客户订单" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label required">客户SKU料号：</label>
                <div class="layui-input-block">
                    <input name="cusSkuCode" placeholder="请输入SKU料号" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label required">客户SKU名称：</label>
                <div class="layui-input-block">
                    <input name="cusProductName" placeholder="请输入产品名称" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">客户规格码：</label>
                <div class="layui-input-block">
                    <input name="cusProductSpec" placeholder="请输入规格码" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label required">计量单位：</label>
                <div class="layui-input-block">
                    <input name="cusProductSpec" placeholder="请输计量单位" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">需求数量：</label>
                <div class="layui-input-block">
                    <input name="cusProductCount" placeholder="请输需求数量" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label required">客户产品类别：</label>
                <div class="layui-input-block">
                    <input name="cusProductType" placeholder="请输产品类别" type="text" class="layui-input"
                           lay-verify="required"
                           required autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">上传图纸附件：</label>
                <div class="layui-input-block">
                    <div id="fileUploadBtn" class="layui-btn" style="float: left;margin-left: 3px"><i class="layui-icon">&#xe681;</i>上传文件
                    </div>
                    <br/>
                    <div id="addHeaderPdf" class="companyFormPhotos"></div>
                    <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"
                           lay-verify="attachmentPdf"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">包装说明：</label>
                <div class="layui-input-block">
                        <textarea name="remark" placeholder="说明" class="layui-textarea"
                                  autocomplete="off"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">工艺说明：</label>
                <div class="layui-input-block">
                        <textarea name="processDescription" placeholder="工艺说明" class="layui-textarea"
                                  autocomplete="off"/>
                </div>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>关联内部产品信息</legend>
    </fieldset>

    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">是否关联新料号：</label>
            <div class="layui-input-block">
                <select id="isUseOrAdd" name="isUseOrAdd" lay-filter="isUseOrAdd"
                        class="common-select-search">
                    <option value="">请选择</option>
                    <option value="1">创建新产品</option>
                    <option value="2">关联已有产品</option>
                </select>
            </div>
        </div>

        <div class="layui-col-md3">
            <label class="layui-form-label required">内部SKU号：</label>
            <div class="layui-input-block" id="SkuInfo">
                <div id="d1">
                    <input type="text" id="inSkuCode" name="inSkuCode" class="layui-input"
                           placeholder="请输入SKU号">
                </div>
                <div id="d2" style="display: none;">
                    <select id="inSkuCodeHave" name="inSkuCodeHave" lay-filter="inSkuCodeHave"
                            class="common-select-search">
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">产品类别：</label>
            <div class="layui-input-block">
                <div style=" margin-left: 33px;width: 84%; " id="productTypeName" lay-filter="productTypeName">
                </div>
                <input id="productTypeId" name="productTypeId" type="hidden" value="' + d.proTypeId + '"
                       lay-verify="required">
            </div>
        </div>

        <div class="layui-col-md3">
            <label class="layui-form-label required">产品性质：</label>
            <div class="layui-input-block">
                <select id="productNature" name="productNature" lay-filter="productNature" class="common-select-search">
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">内部SKU名称：</label>
            <div class="layui-input-block">
                <input type="text" id="inSkuName" name="inSkuName" class="layui-input"
                       placeholder="请输入名称">
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">内部规格码：</label>
            <div class="layui-input-block">
                <input type="text" id="inSkuSpec" name="inSkuSpec" class="layui-input"
                       placeholder="请输入名称">
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">计量单位：</label>
            <div class="layui-input-block">
                <select id="inSkuUnit" name="inSkuUnit" class="layui-input" class="common-select-search"></select>
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label required">基础单位：</label>
            <div class="layui-input-block">
                <input type="text" disabled id="inUnit" name="inUnit" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-row">
        <div class="layui-col-md3">
            <label class="layui-form-label required">基础单位数量：</label>
            <div class="layui-input-block">
                <input type="text" id="inUnitCount" name="inUnitCount" class="layui-input"
                       placeholder="数量">
            </div>
        </div>
        <div class="layui-col-md3">
            <label class="layui-form-label">说明：</label>
            <div class="layui-input-block">
                        <textarea id="inRemark" name="inRemark" placeholder="说明" class="layui-textarea"
                                  autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label required">选择工艺路线：</label>
                <div class="layui-input-block">
                    <select id="processRoute" name="processRoute" class="layui-input" class="common-select-search"></select>
                </div>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>子件MRP物料维护：</legend>
    </fieldset>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="productReviewFormSubmit" lay-submit>保存</button>
    </div>
</form>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'upload', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var upload = layui.upload;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;

        let oldSkuInfo = new Map()

        let customerName = "";
        let postName = "";

        let fileName = "";

        //加载是默认填写
        document.getElementById("d2").style.display = "none";//隐藏
        document.getElementById("d1").style.display = "";//显示
        document.getElementById("customerProductInfo").style.display = "none";

        // 上传附件-pdf
        upload.render({
            elem: '#fileUploadBtn'
            , url: config.upload_url + 'uploadFile'
            , data: {}
            , accept: 'file'
            , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
            , headers: {Authorization: 'Bearer ' + config.getToken()}
            , done: function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg || "上传成功", {icon: 1});
                    let imagUrl = res.data.url;
                    let name = res.data.fileName;
                    fileName = res.data.fileName;
                    $('#addHeaderPdf').html('<div class="attachments">' +
                        '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + name + '</span></div></div>');
                    $('#attachmentPdf').val(imagUrl);

                    $(".attachments").click(function () {
                        let json = {};
                        json.attachment = imagUrl;
                        showViewAttachmentModel(json);
                    })
                } else if (res.code == 502) {
                    return location.replace('admin/login.html');
                } else {
                    layer.msg(res.msg || "上传失败", {icon: 2});
                }
            }
        });

        //是否关联旧SKU选择事件
        form.on('select(isUseOrAdd)', function (data) {
            let val = data.value;
            if (val == 1) {
                document.getElementById("d2").style.display = "none";//隐藏
                document.getElementById("d1").style.display = "";//显示
            } else {
                document.getElementById("d2").style.display = "";//隐藏
                document.getElementById("d1").style.display = "none";//显示
            }
        })

        //customerId
        form.on('select(customerId)', function (data) {
            customerName = data.elem.selectedOptions[0].text;
        });

        //postId
        form.on('select(postId)', function (data) {
            postName = data.elem.selectedOptions[0].text;
        });

        form.on('select(productSource)', function (data) {
            let val = data.value;
            if (val == 1) {
                document.getElementById("customerProductInfo").style.display = "";//隐藏
            } else {
                document.getElementById("customerProductInfo").style.display = "none";//显示
            }
        })

        // 已有物料的选择事件
        form.on('select(inSkuCodeHave)', function (data) {
            let val = data.value;
            let skuInfo = {};
            if (oldSkuInfo.get(val)) {
                skuInfo = oldSkuInfo.get(val);
                //回显
                //sku名称
                $('#inSkuName').val(skuInfo.skuName);
                //规格
                $('#inSkuSpec').val(skuInfo.skuSpec);
                //计量单位
                $('#inSkuUnit').val(skuInfo.unitId);

                $('#productTypeId2').val(skuInfo.productTypeId);
                //基础单位数量
                $('#inUnitCount').val(skuInfo.baseUnitCount);
                //产品类别
                admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3 ,7]}, 'productTypeName', skuInfo.productTypeId, "物料分类", "productTypeId",null);
                //产品性质
                $('#productNature').val(skuInfo.assemblyNature);

                admin.reqSync('enterprise/product/admin/productUnit/getIsBaseUnitProductUnitByType', {
                    type: 0,
                    productTypeId: skuInfo.productTypeId
                }, res => {
                    if (res.code === 200) {
                        if (res.data != null) {
                            let infoName = res.data.name || '';
                            $('#inUnit').val(infoName);
                        }else{
                            $('#inUnit').val("");
                        }
                    }
                }, 'get');
                //说明
                $('#inRemark').val(skuInfo.remark);
                form.render("select")
            }
        });

        //物料类型
        admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3 ,7]}, 'productTypeName', null, "物料分类", "productTypeId", function(data){
            let productTypeId = data.change[0].value;
            //基础单位
            admin.reqSync('enterprise/product/admin/productUnit/getIsBaseUnitProductUnitByType', {
                type: 0,
                productTypeId: productTypeId
            }, res => {
                if (res.code === 200) {
                    if (res.data != null) {
                        let infoName = res.data.name || '';
                        $('#inUnit').val(infoName);
                    }else{
                        $('#inUnit').val("");
                    }
                }
            }, 'get');
        });

        // 查看附件
        function showViewAttachmentModel(data) {
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }

        let subjectId = "";

        //初始化客户名称
        // admin.initDataSelect("enterprise/sell/admin/customersInfo/getBasicInfo", {customerType:"2,3"}, "customerId", null, "客户信息", "customerName","id");

        //初始化客户名称
        admin.req('enterprise/sell/admin/customersInfo/getBasicInfo', {customerType: "2,3"}, function (res) {
            console.log(res.data);
            if (200 == res.code) {

                $("form select[name='customerId']").append(new Option("请选择客户", ""));//往下拉菜单里添加元素
                $.each(res.data, function (index, item) {
                    $("form select[name='customerId']").append(new Option(item.customerName, item.id));//往下拉菜单里添加元素
                })
                $("form select[name='customerId']").val(subjectId);
                form.render(); //菜单渲染 把内容加载进去
            } else {
                layer.msg('获取客户失败!', {icon: 2, time: 1000});
            }
        }, 'GET');

        //物料类型
        admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {materialNatureList: [2, 3]}, 'productTypeName', null, "物料分类", "productTypeId", null);

        //产品性质
        admin.getDictList("productNature", "product_assembly_nature", null, "产品性质");

        //计量单位
        admin.getDictList("inSkuUnit", "sys_product_detail_calculate_unit", null, "计量单位");

        //基础单位
        admin.getDictList("inUnit", "sys_product_detail_base_unit", null, "基础单位");

        // Sku老数据信息
        admin.initDataSelectAndMap("enterprise/product/admin/productDetailWMS/list", {categoryType: "production"}, "inSkuCodeHave", null, "SKU物料", "skuCode", null, oldSkuInfo);

        //部门列表
        // admin.initDataSelectTree(true, 'user/admin/role/getTreeData', null, 'departmentMain', null, "部门", "departmentId", function (data) {
        //     // 获取部门ID
        //     let departmentId = data.change[0].value;
        //     //赋值部门id
        //     $('#departmentId').val(data.change[0].value);
        //     $('#postId').empty();
        //     //部门下的岗位列表
        //     admin.initDataSelect("user/admin/role/getPostData", {roleId: departmentId}, "postId", null, "岗位", null, null);
        // });

        //表单提交事件
        form.on('submit(productReviewFormSubmit)', function (d) {
            layer.load(2);
            d.field.customerName = customerName;
            d.field.postName = postName;
            d.field.fileName = fileName;
            d.field.reviewProcessId = "1";
            admin.req('enterprise/product/admin/productReview/add', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('reviewTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
            return false;
        });

        //时间选择器
        laydate.render({
            elem: '#reviewEndTime'
            , type: 'datetime'
        });

    });
</script>